<template>
    <div>

        <div style="margin-top: 30%; text-align:center; font-size: 25px">
            登&nbsp;&nbsp;录
        </div>

        <div style="margin-top: 20%; text-align:center;">
            <el-form :model="ruleForm" ref="ruleForm">
                <el-form-item>
                    <el-input placeholder="请输入登录账号" v-model="ruleForm.userName"
                              style="margin-bottom: 18px; width: 80%"/>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入登录密码" v-model="ruleForm.password" type="password"
                              style="margin-bottom: 18px; width: 80%" @keyup.native.enter="login"/>
                </el-form-item>
            </el-form>

            <el-button type="primary" style="width: 80%;" @click.native="login()">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
        </div>

    </div>
</template>


<script>
    import {getToken, setToken} from "../utils/dataStorage";
    import {LoginApi} from "../api/api";

    export default {
        data() {
            return {
                ruleForm: {
                    userName: '',
                    password: ''
                },

            };
        },
        methods: {
            login() {
                LoginApi({
                    userName: this.ruleForm.userName,
                    password: this.ruleForm.password
                }).then(data => {
                    setToken(data.token);
                    this.$router.push("/test");
                }).catch(_ => {
                });
            },
        },
        created() {
            if (getToken() != null) this.$router.push("/home");
        }
    }

</script>

<style>


</style>
